<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="转接时间:">
          <el-date-picker v-model="q.created_at_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="玩家ID:">
          <el-input v-model="q.player_id" placeholder="玩家ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>

        <el-form-item label="转接人:">
          <el-select v-model="q.from_user_id" clearable placeholder="请选择">
            <el-option v-for="item in keFuList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单号：">
          <el-input v-model="q.order_id" placeholder="单号" prefix-icon="el-icon-edit"></el-input>

        </el-form-item>
        <el-form-item label="接收人：">
          <el-select v-model="q.to_user_id" clearable placeholder="请选择">
            <el-option v-for="item in keFuList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人：">
          <el-select v-model="q.operator_id" clearable placeholder="请选择">
            <el-option v-for="item in userList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading"
              size="mini" stripe border
              fit
              highlight-current-row
              @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="order_id"
        label="单号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="player_id"
        label="玩家ID"
        width="150">
      </el-table-column>
      <el-table-column
        prop="from_user.name"
        label="转接人"
        >
      </el-table-column>
      <el-table-column
        prop="to_user.name"
        label="接收人"
         >
      </el-table-column>
      <el-table-column

        prop="stay_time"
        label="转接前停留时长(s)">
      </el-table-column>
      <el-table-column
              width="210"
        prop="operator.name"
        label="操作人">
      </el-table-column>
      <el-table-column

        prop="created_at"
        label="操作时间">
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {getReassignList,getKefuAdminList,getKefuList} from '@/api'
  import { queryFilter } from "@/utils/patch";

  export default {
    name: "index",
    data() {
      return {
        show_id: null,
        listData: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        showUpdate: false,
        Timetype: true,
        working: true,
        userList:[],
        keFuList:[],
      }
    },
    created() {
      this.getList()
      this.getuserList()
      this.getKefuList();
    },
    methods: {
      getKefuList(){
        getKefuList().then(res =>{
          if(res.status === 0){
            this.keFuList = res.data
          }
        })
      },
      getuserList(){
        getKefuAdminList().then(res =>{
          if(res.status === 0){
            this.userList = res.data
          }
        })
      },
      receiptWork(val) {
        //通过val值判断点击的是工作还是停止
        //如果是工作，working改为true。否则为false
        if (val === 'work') {
          this.working = true
        } else {
          this.working = false
        }
      },
      Details(row) {
        this.show_id = row.id
        this.showUpdate = true
      },
      // sendMsg(row) {

      // },
      query() {
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_no: 1, page_size: 30}
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },

      getList() {
        let queryObj = queryFilter(this.q)
        getReassignList(queryObj).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
      handleSelectionChange(sel) {
        console.log(sel)
      },
      toggleTimetype() {
        if (this.Timetype) {
          delete this.q.created_at_begin
          delete this.q.created_at_end
          this.Timetype = !this.Timetype
        } else {
          delete this.q.updated_at_begin
          delete this.q.updated_at_end
          this.Timetype = !this.Timetype
        }
      },
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>

<style scoped>
  .el-form-item__label {
    width: 100px !important;
  }
</style>
